<template>
  <div class="plc-status">
    <!-- 正常状态 -->
    <Tag v-if="connected" color="success" class="status-tag">
      <div class="status-content">
        <Icon type="ios-checkmark-circle" class="blink-animation" />
        <span>通讯正常</span>
      </div>
    </Tag>

    <!-- 断开状态 -->
    <Tag v-else color="error" class="status-tag">
      <div class="status-content">
        <Icon type="ios-close-circle" class="pulse-animation" />
        <span>断开连接</span>
      </div>
    </Tag>
  </div>
</template>

<script lang="ts">
// import { Component, Vue, Prop } from 'vue-property-decorator';
import { T_srv, Tsrv, vue } from './config';

@T_srv.comp
export default class plcStatus extends vue {
  // @T_srv.prop({ required: true }) connected!: boolean;
  private connected: boolean = true;

  mounted() {
    this.$bus.$on(
      '__PLC_CONNSTATE__',
      (data: { connState: boolean; ecBoxName: string }) => {
        if (data.ecBoxName === 'mianyang') {
          this.connected = data.connState;
        }
      }
    );
  }
}
</script>

<style lang="scss" scoped>
.plc-status {
  // position: fixed;
  // top: 20px;
  // right: 20px;
  // z-index: 999;

  .status-tag {
    height: 80%;
    padding: 8px 15px;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;

    .status-content {
      display: flex;
      align-items: center;
      gap: 8px;

      span {
        font-weight: 500;
      }
    }
  }

  // 正常状态呼吸灯效果
  .blink-animation {
    color: #cce3d8;
    animation: blink 2s infinite;
  }

  // 断开状态脉冲效果
  .pulse-animation {
    color: #e5d5d1;
    animation: pulse 1.5s infinite;
  }

  @keyframes blink {
    0% {
      opacity: 0.6;
    }
    50% {
      opacity: 1;
    }
    100% {
      opacity: 0.6;
    }
  }

  @keyframes pulse {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
    100% {
      transform: scale(1);
    }
  }

  // 状态标签悬停效果
  .ivu-tag-success:hover {
    background: #19be6b !important;
    opacity: 0.9;
  }

  .ivu-tag-error:hover {
    background: #ed4014 !important;
    opacity: 0.9;
  }
}
</style>
